<!DOCTYPE html>
<html>
  <head>
    <title>商品列表</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
	  <link rel="stylesheet" href="${s.base}/mobile/css/base.css">
	  <link rel="stylesheet" href="${s.base}/mobile/css/component.css">
	  <link rel="stylesheet" href="${s.base}/mobile/css/weui.min.css">
	  <link rel="stylesheet" href="${s.base}/mobile/css/jquery-weui.css">
    <style type="text/css">
      body,html {
        background: #FFF;
      }
      .xyg-comp-banner{
        width:100%;
        height:200px;
      }
      .xyg-comp-banner img{
        width:100%;
        height:200px;
      }
      .xyg-article{width:90%;height:auto; margin:1rem 5% 0.1rem 5%;}
      .xyg-article .xyg-article-item{width:100%;height:auto; margin-bottom:0.5rem; padding-bottom: 0.5rem; border-bottom: 0.01rem solid #f4f4f4;}
      .xyg-article .xyg-article-item .xyg-article-item-pic{ width: 19%;
        height: 3.5rem;
        text-align: left;
        float: left;
        margin: 0px 2%;}
      .xyg-article .xyg-article-item .xyg-article-item-pic img{ width: 2.8rem;
        height: 96%;
        max-width: 100%;
        float: right;}
      .xyg-article .xyg-article-item .xyg-article-item-content{width: 75%;
        height: 3.5rem;
        float: left;
        margin-left: 2%;
        color: #0C0C0C;
      }

      .xyg-article .xyg-article-item .xyg-article-item-content-title{width: 100%;
        height: 1.5rem;
        line-height: 1.5rem;
        font-weight: bold;
        letter-spacing: 0.02rem;
        color: #0C0C0C;
      }
      .xyg-article .xyg-article-item .xyg-article-item-content-price{color: #F00; float: right; font-size: 16px; font-weight: normal;
      }
      .xyg-article .xyg-article-item .xyg-article-item-content-content{width: 100%;
        height: 2rem;
        line-height: 1rem;
        color: #999;
      }
      .xyg-jskf{width:12rem;height:8.5rem; position: absolute; top: 20%; left: 50%; margin-left: -6rem; }
      .xyg-jskf img{width:100%; height:6rem; margin-bottom: 0.5rem;}
      .xyg-jskf .xyg-jskf-title{width:100%; height:2rem;line-height:2rem; letter-spacing: 0.1rem; font-size: 16px; color:#ADADAD; text-align: center;}
    </style>
  </head>
  <body>
  <div class="xyg-index">
    <!--banner图开始-->
    <#if shopBannerList??&&(shopBannerList?size gt 0)>
    <div class="xyg-comp-banner swiper-container">
      <div class="swiper-wrapper">
          <#list shopBannerList as shopBanner>
          <div class="swiper-slide"><img src="${shopBanner.image}" /></div>
        </#list>
      </div>
      <div class="swiper-pagination xyg-comp-banner-swiper"></div>
    </div>
    </#if>
    <!--banner图结束-->
    <!--课程内容开始-->
    <div class="xyg-article xyg-content">

    </div>
    <!--课程内容结束-->
  </div>
  <div class="xyg-jskf" style="display: none;">
    <img src="${s.base}/mobile/images/icon_jskfz.png"/>
    <div class="xyg-jskf-title">
      暂无商品
    </div>
  </div>


  <!--底部菜单开始-->
  <div style="width:100%; height:2.5rem;"></div>
  <div class="xyg-comp-bottom">
    <div class="xyg-comp-bottom-item">
      <a href="javascript:void(0)" onclick="goFistPage('${memberId}')">
        <img src="${s.base}/mobile/images/menu_icon_1_a.png"/>
        <div class="xyg-comp-bottom-item-text select-text">首页</div>
      </a>
    </div>
    <div class="xyg-comp-bottom-item">
      <a href="javascript:void(0)" onclick="goBankPage('${memberId}')">
        <img src="${s.base}/mobile/images/menu_icon_2.png"/>
        <div class="xyg-comp-bottom-item-text">银行兑换</div>
      </a>
    </div>
    <div class="xyg-comp-bottom-item">
      <a href="javascript:void(0)" onclick="goDetailPage('${memberId}')">
        <img src="${s.base}/mobile/images/menu_icon_3.png"/>
        <div class="xyg-comp-bottom-item-text">权益管理</div>
      </a>
    </div>
    <div class="xyg-comp-bottom-item">
      <a href="javascript:void(0)" onclick="goMyPage('${memberId}')">
        <img src="${s.base}/mobile/images/menu_icon_4.png"/>
        <div class="xyg-comp-bottom-item-text">账户中心</div>
      </a>
    </div>
    <div class="clearBoth"></div>
  </div>
  <!--底部菜单结束-->

  </body>
  <script src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
  <script src="${s.base}/mobile/js/jquery-2.1.4.js"></script>
  <script src="${s.base}/mobile/js/jquery-weui.js"></script>
  <script src="${s.base}/mobile/fonts/iconfont.js"></script>
  <script src="${s.base}/mobile/js/swiper.js"></script>
  <script src="${s.base}/mobile/js/component.js"></script>

  <script src="${s.base}/mobile/js/base.js"></script>
  <script>
      $(document).ready(function(e) {
          $.fn.initXygCompBanner();
      });
</script>

  <script type="text/javascript">
    var memberId='${memberId}';
    var catId = '${catId}';
    var bank = '${bank}';
    var num=10;
    var loading = false;  //状态标记
    var pageStart=0;
    $(document).ready(function(e) {
      sendPost();
      $(document.body).infinite();
      $(document.body).infinite().on("infinite", function() {
        if(loading) return;
        loading = true;
        sendPost();
      });
    });

    function sendPost() {
      pageStart++;
      $.post("/phone/shopItemJsonList",{
        pageSize : num,
        pageNum: pageStart,
        catId:catId,
        bank:bank
      },function(resultInfo){
        if (resultInfo.code == 0){
          var result = '';
          if (resultInfo.data!=null && resultInfo.data.length > 0){
            for(var i=0;i<resultInfo.data.length;i++){
              var shopItem = resultInfo.data[i];

              var content = '<div class="xyg-article-item">\
                              <a href="/phone/itemDesc?id='+shopItem.id+'&memberId='+memberId+'">\
                              <div class="xyg-article-item-pic">\
                                  <img src="'+shopItem.image+'"></div>\
                                <div class="xyg-article-item-content">\
                                  <div class="xyg-article-item-content-title">'+shopItem.title+'<div class="xyg-article-item-content-price">￥'+shopItem.prePrice+'</div></div>\
                                  <div class="xyg-article-item-content-content">'+shopItem.description+'</div></div>\
                                <div class="clearBoth"></div>\
                              </a>\
                            </div>';

              $(".xyg-content").append(content);
              loading = false;
              if(!resultInfo.hasNextPage){
                $(document.body).destroyInfinite();
              }
            }
          }else{
              $(".xyg-index").hide();
              $(".xyg-jskf").show();
          }
        }
      },"json");
    }
    function getShopItemDetailPage(id) {
      window.location.href="/phone/shopItemDetail?id="+id;
    }
  </script>
</html>

